<template>
  <el-container id="com-template">
    <el-aside>
      <com-tree @nodeClick="treeNodeClick" />
    </el-aside>
    <el-main v-loading="mainLoading">
      <div>
        <div class="clearfix mb-10">
          <el-button
            type="success"
            class="fl"
            @click="save"
            :disabled="activeTreeNode == null"
            >保存</el-button
          >
          <el-button type="danger" class="fr" @click="clear">清空</el-button>
        </div>
        <form-table :data="tableList" ref="formTable" />
      </div>
    </el-main>
    <com-list class="layout-right" @rowClick="addRow" />
  </el-container>
</template>
<script>
import comTree from "./comTree";
import comList from "./comList";
export default {
  name: "comTemplate",
  components: {
    comTree,
    comList,
  },
  data() {
    return {
      mainLoading: false,
      tableList: [],
      activeTreeNode: null,
    };
  },
  methods: {
    treeNodeClick(data) {
      this.mainLoading = true;
      if (!data.children || data.children.length <= 0) {
        setTimeout(() => {
          this.mainLoading = false;
          this.$refs.formTable.updatedData(JSON.parse(data.tableJson));
          this.activeTreeNode = data;
        }, 300);
      } else {
        this.activeTreeNode = null;
      }
    },
    addRow(row) {
      if (!this.activeTreeNode) return;
      this.$refs.formTable.addRow(row);
    },
    async save() {
      const tableJson = JSON.stringify(this.$refs.formTable.getData());
      await this.$http({
        data: {
          tableId: this.activeTreeNode.tableId,
          tableJson,
        },
        url: "/form/table-template/save",
      });
      this.activeTreeNode.tableJson = tableJson;
      this.$message.success("保存成功");
    },
    clear() {
      this.$refs.formTable.updatedData();
    },
  },
  created() {},
};
</script>
<style lang="scss">
#com-template {
  padding: 10px;
  height: 100%;
  .el-aside,
  .el-main,
  .layout-right {
    overflow-y: auto;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #eee;
  }
  .el-main {
    margin: 0 10px;
  }
}
</style>